<script setup lang="ts">
    import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus';
    import { useRoute } from 'vue-router';
    import type { RouteLocationMatched } from 'vue-router';

    import { computed } from 'vue';

    defineOptions({
        name: 'Breadcrumb',
    });

    const currentRoute = useRoute();

    /** 获取路由路径 */
    const getPath = (item: RouteLocationMatched): string | Object => {
        if (!item) return '';
        if (item.meta?.isReadonlyBreadcrumb) return '';
        return { path: item.redirect ? item.redirect : item.path };
    };

    /** 面包屑列表 */
    const breadcrumbList = computed(() =>
        currentRoute.matched.filter((item) => !item.meta.isHideBreadcrumb),
    );
</script>

<template>
<!--    <ElBreadcrumb>-->
    <ElBreadcrumbItem v-for="item in breadcrumbList" :key="item.path" :to="getPath(item)">
        <span>{{ item.meta.title }}</span>
    </ElBreadcrumbItem>
<!--    </ElBreadcrumb>-->
</template>
